<template>
  <div class="item">
    <div class="item">
      <i>
        <slot name="icon"></slot>
      </i>
      <h3>
        <slot name="heading"></slot>
      </h3>
    </div>
    <div class="details">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss">
.item {
  // display: flex;
  // align-items: center;
  margin-bottom: 20px;
  > .item {
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 20px;
    > i {
      margin-right: 1rem;
    }
    > h3 {
      margin-bottom: 0;
      transform: translateY(-12px);
    }
  }
}
.icon {
  margin-right: 10px;
}
</style>
